import Vue from "vue";
import VueRouter from "vue-router";
import Home from "@/pages/Home";
import Discover from "@/pages/Discover"
// import Toplist from "@/pages/Toplist";

// 把路由注入到所有的子组件
Vue.use(VueRouter);

// 定义路由配置，路由配置一般由path和component组成

// 配置路由的步骤
// 1.构建视图组件
// 2.配置routes，一个path映射一个component
// 3.router-view 配置视口
const routes = [
  {
    path: "/home",
    name:"/home",
    props:true,
    component: Home,
  },
  {
    path: "/discover",   // 路径对大小写不影响
    component: Discover,
    // 重定向
    redirect: "/discover/toplist",
    // children这个属性和routes基本是一直的
    // 二级路径的最前面不要带"斜杠/"
    children:[
      {
        // 具名路由
        name:"djradio",
        path:"djradio",
        component:() => import(/* webpackChunkName:'djradio'*/'@/pages/Discover/Djradio')
      },
      {
        name:"toplist",
        path:"toplist",
        component:() => import(/* webpackChunkName:'toplist'*/'@/pages/Discover/Toplist')
        
        // 多视图写法   了解
        // components:{
        //   djradio:() => import(/* webpackChunkName:'djradio'*/'@/pages/Discover/Djradio'),
        //   toplist:() => import(/* webpackChunkName:'toplist'*/'@/pages/Discover/Toplist')
        // }
      }
    ]
  },
  {
    path: "/friend",   
    // 路由懒加载,按需加载
    // 将这段代码进行切割，加快首屏渲染速度
    component: ()=>import(/*webpackChunkName:'friend' */'@/pages/Friend')
  },
  // 匹配的优先级，同一个路径可以匹配多个组件，优先级：按照定义的顺序，谁先定义就先匹配谁
  {
    path: "/goods",   
    // 路由懒加载,按需加载
    // 将这段代码进行切割，加快首屏渲染速度
    component: ()=>import(/*webpackChunkName:'goods' */'@/pages/Goods')
  },
  // {
  //     path: "/goods",
  //     component: () => import(/* webpackChunkName:'page404' */'@/pages/Page404')
  // },
  {
    path: "/detail/:id",    //动态路由参数 params 参数

    props:true,  // 1.步  路由解耦
    // 路由懒加载,按需加载
    // 将这段代码进行切割，加快首屏渲染速度
    component: ()=>import(/*webpackChunkName:'detail' */'@/pages/Detail')
  },
  {
    path:"*",
    component: ()=>import(/*webpackChunkName:'404' */'@/pages/Page404')
  },
  {
    path:"/count",
    component: ()=>import(/*webpackChunkName:'count' */'@/pages/Count')
  },
  {
    // 重定向,页面刷新到指定页面
    path:"/",
    redirect:"/axios"
  },
  {
    path:"/gouwuche",
    component: ()=>import(/*webpackChunkName:'gouwuche' */'@/pages/Gouwuche')
  },
  {
    path:"/axios",
    component: ()=>import(/*webpackChunkName:'axios' */'@/pages/AxiosUse')
  },
];

// const router = new VueRouter({
//   routes,
// });

export default new VueRouter({
  // mode:"abstract",
  routes,
});
